<template>
    <div id="SettingManage">
        <el-row>
            <el-col :span="4">
                <el-button type="primary" @click="addNewConfig(' ',1)">新增配置</el-button>
            </el-col>
        </el-row>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item  v-for="(item,key,index) in typeList" :key="key" :title="key" @click.native="loadMore(item,key,index)" :name="index">
                <ul v-loading = "loading">
                    <li>
                        <el-row>
                            <el-col :offset="22" :span="2">
                               <el-button type="success" size="mini" @click="addNewConfig(key,typeDataSource.length+1)">新增</el-button>                                
                            </el-col>
                        </el-row>
                    </li>
                    <li v-for="(obj,index) in typeDataSource" :key="index" style="height:44px">
                       <el-row>
                           <el-col :span="22" style="line-height:44px">{{index+1}}.{{obj.kvalue}}</el-col>
                           <el-col :span="2" style="line-height:44px">
                               <el-button type="danger" size="mini" @click="deleteObj(obj)">删除</el-button>
                           </el-col>
                       </el-row>
                    </li>
                </ul>
            </el-collapse-item>
        </el-collapse>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data(){
        return {
            dataSource: [],
            loading: true,
            typeDataSource: [],//根据点击相应类型后获取到的数据
            selectedIndex: undefined, //选中标签
            activeName: '1',
            keyTypes: [],//获取分类
        }
    },
    
    computed: {
        // 根据不同的数据类型,用一个新对象,以type为属性名,数据数组为属性值
        typeList(){
            var dataObj = {}
            for(var i=0;i<this.dataSource.length;i++){
                var data = this.dataSource[i];
                if(!dataObj[data.ktype]){
                    dataObj[data.ktype] = [data]
                }else{
                    dataObj[data.ktype].push(data);
                }
            }
            return dataObj;
        }
    },
    methods: {
        addNewConfig(keyType,kkey){
            this.$router.push({name:'AddNewSetting',params:{keyType:keyType,kkey:kkey}})
        },
        deleteObj(obj){
            // 删除指定行的元素 /backstage/config/delete
            var deleteURL = window.baseURL + "/backstage/config/delete";
            var deleteObj = {ktype: obj.ktype,kkey:obj.kkey,token: this.$token}
            this.$http.post(deleteURL,this.$qs.stringify(deleteObj))
            .then((response)=>{
                this.activeName = 0
                this.loadData();
                this.$router.go(0);
            })
           .catch((error)=>{
           })
        },
        addNewOne(){

        },
        loadMore(item,key,index){
            this.loading = true;
            if(this.selectedIndex == index){
                this.loading = false;
                return;
            }
            this.selectedIndex = index;
            //查询分类 112.74.74.235:8080/ruisiyuan/backstage/config/findConfigs
            var url = window.baseURL+"/backstage/config/findConfigs?ktype="+key+"&token="+this.$token;
            this.$http.get(url)
            .then((response)=>{
                setTimeout(()=>{
                    this.loading = false;
                },500)
                this.typeDataSource = response.data.data;

            })
            .catch((error)=>{
            })
        },
        loadData(){
            var configURL = window.baseURL + "/backstage/config/findConfigs?token="+this.$token;
            this.$http.get(configURL)
            .then((response)=>{
                this.dataSource = response.data.data;
            })
            .catch((error)=>{
            })
        }
    },
    beforeRouteUpdate (to, from, next) {
        if(to.name == "config"){
            this.loadData();
        }
        next();
    },
    created(){
       this.loadData();
    }
}
</script>

<style lang="scss" scoped>
    #SettingManage {
        width: 100%;
        padding: 40px;
        box-sizing: border-box; 
        // overflow-y: scroll;
    }
</style>
